<template>
	<div id="indexMap"></div>
</template>

<script>
	import { shops,dianti } from '@/utills/ApiServices'; // 导入我们的api接口
export default {
	name: 'feedback',
	data() {
		return {
			indexMap: '',
			infoWindow: ''
		};
	},
	beforeDestroy() {
		if (this.timer) {
			//如果定时器还在运行 或者直接关闭，不用判断
			clearInterval(this.timer); //关闭
		}
	},
	mounted() {
		var that = this;
		that.indexMap = new AMap.Map('indexMap', {
			mapStyle: 'amap://styles/darkblue',//极夜蓝
			resizeEnable: true, //是否监控地图容器尺寸变化
			zoom: 14, //初始化地图层级
			center: [115.360721, 33.287242], //初始化地图中心点
			// features: ['bg', 'road', 'building', 'point']
			features: ['bg','road', 'point']
		});

		that.infoWindow = new AMap.InfoWindow({
			offset: new AMap.Pixel(-2, -65)
		});
		window.onMapClick = function () {
			that.infoWindow.close();
		};
		that.getpoins();
		that.dianti();
	},
	methods: {
		async dianti(){
			var that = this;
			const res = await dianti();
			if(res.code == 1){
				res.data.forEach((item) => {
					var marker = new AMap.Marker({
						position: [item.lng, item.lat],
						icon: 'https://z1.ax1x.com/2023/11/15/piY872q.png',
						offset: new AMap.Pixel(-21, -62),
						map: that.indexMap
					});
					marker.content = `<div style="background: url('https://z3.ax1x.com/2021/09/06/hhP4yV.png') no-repeat center;
						background-size: 100% 100%;width: 291px;height: 157px;box-sizing: border-box;padding:12px 20px 12px 30px;margin:0px;
						font-size: 16px;color:#FFFFFF;">
							<div style="display: flex;justify-content: space-between;align-items: center;">
								<div style="display: flex;align-items: center;">
									<img style="width:40px;height:18px;margin-right:10px;" src="https://z3.ax1x.com/2021/09/06/hfX98U.png" alt="">
									<div style="font-size:20px;color:#004DFF;line-height:28px;">${item.typestr}</div>
								</div>
								<div onclick="onMapClick()" style="font-size:14px;color:#FFFFFF;line-height:28px;">关闭</div>
							</div>
				
							<div style="font-size: 16px;padding:16px 0;">
								<div style="display: flex;align-items: center;margin:5px 0;"><div style="color:#B3CAFF;">标题：</div>${item.sydw}</div>
								<div style="display: flex;align-items: center;margin:5px 0;"><div style="color:#B3CAFF;">人员：</div>${item.userlist}</div>
								<div style="display: flex;align-items: center;margin:5px 0;"><div style="color:#B3CAFF;">位置：</div>${item.address}</div>
							</div>
						</div>`;
					marker.on('click', markerClick);
				
					// 设置点标记的动画效果，此处为弹跳效果
					// marker.setAnimation('AMAP_ANIMATION_BOUNCE');
				
					function markerClick(e) {
						that.infoWindow.setContent(e.target.content);
						that.infoWindow.open(that.indexMap, e.target.getPosition());
					}
				
					that.indexMap.add(marker);
				});
				
				that.indexMap.setFitView();
			}
		},
		async getpoins() {
			var that = this;
			const res = await shops();
			if(res.code == 1){
				// console.log(res.data)
				res.data.forEach((item) => {
					let icon = '';
					if(item.type==1){
						icon='https://z1.ax1x.com/2023/11/15/piY8TGn.png'
					}else{
						icon='https://z1.ax1x.com/2023/11/15/piY8oPs.png';
					}
					var marker = new AMap.Marker({
						position: [item.lng, item.lat],
						icon: icon,
						offset: new AMap.Pixel(-21, -62),
						map: that.indexMap
					});
					marker.content = `<div style="background: url('https://z3.ax1x.com/2021/09/06/hhP4yV.png') no-repeat center;
						background-size: 100% 100%;width: 291px;height: 157px;box-sizing: border-box;padding:12px 20px 12px 30px;margin:0px;
						font-size: 16px;color:#FFFFFF;">
							<div style="display: flex;justify-content: space-between;align-items: center;">
								<div style="display: flex;align-items: center;">
									<img style="width:40px;height:18px;margin-right:10px;" src="https://z3.ax1x.com/2021/09/06/hfX98U.png" alt="">
									<div style="font-size:20px;color:#004DFF;line-height:28px;">${item.typestr}</div>
								</div>
								<div onclick="onMapClick()" style="font-size:14px;color:#FFFFFF;line-height:28px;">关闭</div>
							</div>

							<div style="font-size: 16px;padding:16px 0;">
								<div style="display: flex;align-items: center;margin:5px 0;"><div style="color:#B3CAFF;">名称：</div>${item.title}</div>
								<div style="display: flex;align-items: center;margin:5px 0;"><div style="color:#B3CAFF;">位置：</div>${item.address}</div>
							</div>
						</div>`;
					marker.on('click', markerClick);

					// 设置点标记的动画效果，此处为弹跳效果
					// marker.setAnimation('AMAP_ANIMATION_BOUNCE');

					function markerClick(e) {
						that.infoWindow.setContent(e.target.content);
						that.infoWindow.open(that.indexMap, e.target.getPosition());
					}
					that.indexMap.add(marker);
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
#indexMap {
	margin-top: 19px;
	flex: 1;
	height: 868px;
	border-radius: 8px;
}
</style>
